<template>
  <div class="char">
    <div class="form_container" @keyup.enter="searchQuery">
      <a-form
        layout="inline"
        :model="queryParam"
        :labelCol="{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 }"
      >
        <a-form-item
          label="近期绑定者"
          :labelCol="{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 14 }"
          :wrapperCol="{ xs: 24, sm: 12, md: 12, lg: 18, xl: 18, xxl: 15 }"
          style="margin-right: 40px"
        >
          <a-select v-model:value="queryParam.bindType" :options="options"></a-select>
        </a-form-item>
        <a-form-item
          label="绑定者"
          :wrapperCol="{ xs: 24, sm: 12, md: 12, lg: 18, xl: 18, xxl: 18 }"
        >
          <rw-select
            type="patient"
            label="binderName"
            keyValue="binderId"
            @input="
              (e) => {
                queryParam.binderId = e;
              }
            "
            watchParams="days"
            :xhrParams="{ data: 'data', days: queryParam.bindType || 7 }"
          ></rw-select>
        </a-form-item>
        <!-- <a-form-item
          label="标签类型"
          :wrapperCol="{ xs: 24, sm: 12, md: 12, lg: 18, xl: 18, xxl: 15 }"
        >
          <dict-select v-model="queryParam.type" code="4210085120645926912"></dict-select>
        </a-form-item> -->
        <a-form-item
          label="时间段"
          :labelCol="{ xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 }"
        >
          <a-range-picker
            v-model:value="queryParam.time"
            value-format="YYYY-MM-DD HH:mm:ss"
            show-time
          />
        </a-form-item>
        <!-- <a-form-item label="时间间隔">
          <a-input v-model:value="queryParam.secondInterval">
            <template #suffix> 秒 </template>
          </a-input>
        </a-form-item> -->
        <a-form-item>
          <a-button
            type="primary"
            preIcon="ant-design:search-outlined"
            @click="searchQuery"
            style="margin-left: 40px"
            :loading="loading"
            >查询</a-button
          >
        </a-form-item>
        <a-form-item>
          <a-popover placement="bottom" :overlayStyle="{ width: '300px' }">
            <template #title>
              <span>图表设置</span>
            </template>
            <template #content>
              <div class="chart_set">
                <div class="item">
                  <span class="item_title">时间刻度:</span>
                  <div class="item_value">
                    <a-radio-group @change="scaleChange" v-model:value="charParams.scale">
                      <a-radio :value="item.value" v-for="item in scaleOptions">{{
                        item.label
                      }}</a-radio>
                    </a-radio-group>
                  </div>
                </div>
                <div class="item">
                  <span class="item_title">显示：</span>
                  <a-checkbox
                    @change="resizeChar"
                    class="item_value"
                    v-model:checked="item.isChecked"
                    :value="item.type"
                    v-for="item in chartPublic"
                    >{{ item.name }}</a-checkbox
                  >
                </div>
              </div>
            </template>
            <a-button preIcon="ant-design:setting-outlined" shape="circle"></a-button>
          </a-popover>
        </a-form-item>
      </a-form>
    </div>
    <div class="chart_container" :loading="loading">
      <div class="box" v-for="item in chartPublic.filter((item) => item.isChecked)">
        <div :id="'charts' + item.type" class="charts" v-if="item.isChecked"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, shallowRef, unref } from "vue";
import rwSelect from "/@/components/RW/orgSelect.vue";
// import dictSelect from "/@/components/RW/dictSelect.vue";
import { list } from "./index.api";
import * as echarts from "echarts";
import * as echartsOptions from "./echarts";
import { useMessage } from "/@/hooks/web/useMessage";
const { createMessage: msg } = useMessage();
const loading = ref<boolean>(false);
const charParams = ref({
  scale: "月",
});
const options = [
  { label: "近三天", value: 3 },
  { label: "近七天", value: 7 },
  { label: "近半月", value: 15 },
  { label: "近一月", value: 30 },
];

const scaleOptions = [
  { label: "月", value: "月" },
  { label: "周", value: "周" },
  { label: "天", value: "天" },
];
// const interval =
const chartPublic = ref([
  {
    name: "心率",
    el: shallowRef({} as echarts.EChartsType),
    type: "HeartRate",
    getoption: echartsOptions.getHeartChart,
    showCode: ["Bracelet"],
    isChecked: true,
  },
  {
    name: "血氧",
    el: shallowRef({} as echarts.EChartsType),
    type: "BloodOxygen",
    getoption: echartsOptions.getBloodOxygenChart,
    showCode: ["Bracelet"],
    isChecked: true,
  },
  {
    name: "体温",
    el: shallowRef({} as echarts.EChartsType),
    type: "Temperature",
    getoption: echartsOptions.getTemperatureChart,
    showCode: ["Bracelet"],
    isChecked: true,
  },
  // {
  //   name: "呼吸",
  //   type: "BreathRate",
  //   getoption: echartsOptions.getBreathRateChart,
  //   showCode: ["Bracelet"],
  //   isChecked: false,
  // },
]);
const queryParam = ref({
  bindType: 7,
  secondInterval: 10,
});

const searchQuery = async () => {
  if (!queryParam.value.binderId) return msg.error("请选择绑定者!");
  if (!queryParam.value.time) return msg.error("请选择时间段");
  loading.value = true;
  let res = await list(unref(queryParam));
  loading.value = false;
  if (!res.data.length) {
    return msg.error("暂时没有体征");
  }
  setOptions(res.data);
};

onMounted(() => {
  initCharts();
});
const getintervalTime = (type) => {
  let time = 0;
  switch (type) {
    case "月":
      time = 30 * 3600 * 24 * 1000;
      break;
    case "周":
      time = 7 * 3600 * 24 * 1000;
      break;
    case "天":
      time = 1 * 3600 * 24 * 1000;
      break;
  }
  return time;
};
const scaleChange = (e) => {
  for (let i = 0; i < chartPublic.value.length; i++) {
    const char = chartPublic.value[i];
    const options = char.el.getOption();
    options.xAxis[0].maxInterval = getintervalTime(e.target.value);
    char.el.setOption(options);
  }
};

const resizeChar = () => {
  let func = () => {
    chartPublic.value.forEach((char) => {
      char.el?.resize({ animation: { duration: 1000 } });
    });
  };
  nextTick(() => {
    setTimeout(() => {
      initCharts();
      searchQuery();
      func();
    }, 0);
  });
  window.addEventListener("resize", func);
};

const initCharts = () => {
  for (let i = 0; i < chartPublic.value.length; i++) {
    let char = chartPublic.value[i];
    let box = document.getElementById(`charts${char.type}`);
    char.el = box && echarts.init(box);
  }
};

function setOptions(data: any[]) {
  let result = { label: [], value: [] };
  result.label = data.map((item) => {
    return item.ariseTime;
  });
  result.value = data;
  result.time = getintervalTime(charParams.value.scale);
  for (let i = 0; i < chartPublic.value.length; i++) {
    let char = chartPublic.value[i];
    let option = char.getoption(result);
    char.el?.setOption(option);
  }
}
</script>

<style lang="scss">
.chart_set {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .item_title {
      width: 25%;
    }
    .item_value {
      flex: 1;
    }
  }
}
</style>

<style lang="less" scoped>
.char {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  .form_container {
    padding: 12px 10px 14px 10px;
    background-color: @component-background;
    border-radius: 2px;
    margin-bottom: 8px;
  }
  .chart_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: @component-background;
    .box {
      flex: 1;
      width: 100%;
      margin: 10px 0;
      .charts {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
